<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Toggle - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Toggle - Basic</ion-title>
          <ion-buttons slot="primary">
            <ion-toggle legacy="true"></ion-toggle>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-item>
            <ion-label>Orange</ion-label>
            <ion-toggle legacy="true" id="orange" slot="start" name="orange"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Apple</ion-label>
            <ion-toggle legacy="true" slot="start" name="apple" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Banana</ion-label>
            <ion-toggle legacy="true" slot="start" name="banana" checked class="toggle-part"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Cherry, disabled</ion-label>
            <ion-toggle legacy="true" slot="start" color="danger" name="cherry" disabled></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Grape, checked, disabled</ion-label>
            <ion-toggle
              legacy="true"
              slot="start"
              id="grapeChecked"
              value="grape"
              name="grape"
              checked
              disabled
            ></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
            <ion-toggle legacy="true" slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
            <ion-toggle
              legacy="true"
              slot="start"
              color="light"
              (ionChange)="strawberryChange($event)"
              checked="true"
            ></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
            <ion-toggle legacy="true" slot="end" color="danger" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Checkbox right side</ion-label>
            <ion-toggle legacy="true" slot="end" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
            <ion-icon name="information-circle" slot="end"></ion-icon>
          </ion-item>

          <ion-item>
            <ion-label>Custom</ion-label>
            <ion-toggle
              legacy="true"
              slot="start"
              style="--border-radius: 0px; --handle-border-radius: 0px"
              checked
            ></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Stop Immediate Event Propagation</ion-label>
            <ion-toggle legacy="true" slot="start" checked id="eventPropagation"></ion-toggle>
          </ion-item>
        </ion-list>

        <p aria-hidden="true" class="ion-text-center">
          <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small"
            >Grape Checked</ion-button
          >
          <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small"
            >Grape Disabled</ion-button
          >
          <ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
        </p>

        <p>
          <ion-toggle id="standAloneChecked" legacy="true"></ion-toggle>
          Stand-alone toggle:
          <span id="standAloneCheckedSpan"></span>
        </p>
      </ion-content>

      <style>
        .toggle-part.toggle-checked::part(handle) {
          background: red;
        }

        .toggle-part.toggle-checked::part(track) {
          background: purple;
        }

        .toggle-part::part(handle) {
          background: green;
        }

        .toggle-part::part(track) {
          background: hotpink;
        }
      </style>

      <script>
        function printForm(ev) {}

        function toggleBoolean(id, prop) {
          var el = document.getElementById(id);

          var isTrue = el[prop] ? false : true;
          el[prop] = isTrue;
        }

        document.getElementById('eventPropagation').addEventListener('click', (evt) => {
          evt.stopImmediatePropagation();
          console.log('clicked');
        });
      </script>
    </ion-app>
  </body>
</html>
